<template>
  <div class="wrap">
        <div class="title">{{ title }}</div>
        <div class="clock-wrap">
            <span class="clock-value">{{day}}</span>
            <span class="clock-label">天</span>
            <span class="clock-value">{{hour}}</span>
            <span class="clock-label">时</span>
            <span class="clock-value">{{minute}}</span>
            <span class="clock-label">分</span>
        </div>                
    </div>
</template>

<script>
export default {
    name: 'LotteryCountDown',
    props: {
        prizes: {
            type: Object
        }
    },
    data() {
        return {
            timer: null,
            day: 0,
            hour: 0,
            minute: 0
        }
    },
    computed: {
        hasPrizes() {
            return !!this.prizes
        },
        title() {
            let data = '开奖倒计时'
            if (this.hasPrizes) {
                const status = this.prizes.status
                switch(status) {
                    case 0:
                        data = '开奖倒计时'
                        break
                    case 1:
                        data = '正在开奖中...'
                        break
                    case -1:
                        data = '该抽奖活动已失效'
                        break
                    default:
                        data = '开奖倒计时'
                }
            }
            return data
        },
        // 开奖时间
        openTime() {        
            return this.hasPrizes ? this.prizes.lottery_time : 0
        }
    },
    mounted() {
        this.start()
    },
    updated() {
        this.stop()
        if (this.prizes.status === 0) {
            this.start()
        }        
    },
    beforeDestroy() {
        this.stop()
    },
    methods: {
        addZero(val) {
            return (val + '').padStart(2, '0')
        },
        countTime() {
            const nowTime = Math.ceil(new Date().getTime() / 1000)
            const diff = this.openTime - nowTime
            let diffDate = Math.floor(diff / 60 / 60 / 24)
            diffDate = diffDate < 0 ? 0 : diffDate
            let diffHour = Math.floor((diff - 24 * diffDate * 60 * 60) / 60 / 60)
            diffHour = diffHour < 0 ? 0 : diffHour
            let diffMinute = Math.ceil((diff - 24 * diffDate * 60 * 60 - 60 * diffHour * 60) / 60)
            diffMinute = diffMinute < 0 ? 0 : (diffMinute > 59 ? 59 : diffMinute)
            this.day = this.addZero(diffDate)
            this.hour = this.addZero(diffHour)
            this.minute = this.addZero(diffMinute)            
        },
        start() {
            this.countTime()
            this.timer = setInterval(() => {
                this.countTime()
            }, 30000)
        },
        stop() {
            clearInterval(this.timer)
            this.timer = null
        }
    }
}
</script>

<style lang="scss" scoped>
    .wrap {
        padding: 10px;
        @include border1px(#e7e7e7, 1px 0);
    }
    .title{
        padding: 2px 0 10px;
        font-size: 15px;
        text-align: center;
    }
    .clock-wrap{
        display: flex;
        align-items: center;
        justify-content: center;        
        .clock-value {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;        
            width: 40px;
            height: 50px;    
            font-size: 24px;
            font-weight: bold;
            color: $theme-color;
            @include border1px(#ccc, 1px);
        }
        .clock-label {
            padding: 0 6px;
            font-size: 12px;
            color: $color-text-secondary;
        }
    }
</style>